<template>
	<view>
		<u-navbar placeholder fixed autoBack title="搜索"></u-navbar>
		<view class="search u-border-bottom d-p-l-30 d-p-r-30 d-p-t-20 d-p-b-20 d-flex">
			<view class="input d-flex d-flex-1">
				<u-icon name="search" size="38rpx" color="#ADB4BD"></u-icon>
				<view class="d-flex-1"><u--input v-model="keyWord" border="none" style="padding: 0;height: 75rpx;" placeholder="请输入查询信息"></u--input></view>
			</view>
			<u-button text="搜索" @click="init()" type="primary" :customStyle="{ width: '136rpx', height: '75rpx', marginLeft: '20rpx' }"></u-button>
		</view>
		<u-gap height="115rpx" bgColor="#ffffff"></u-gap>

		<view class="d-p-30">
			<template v-if="list && list.length > 0">
				<template v-if="type == 'wages'">
					<view class="card d-m-t-30 d-p-30" v-for="(item, index) in list" :key="index">
						<view class="d-flex d-col-top">
							<view class="d-flex-1 d-font-24">
								<view class="d-flex" style="color: #5D6672;">
									<view class="d-flex-1 ">
										<text style="font-weight: bold;">工资期（间）</text>
										<text class="d-m-l-20">{{ item.ffgzny }}</text>
									</view>
									<view class="" style="width: 260rpx;">
										<text style="font-weight: bold;">发放日期</text>
										<text class="d-m-l-20">{{ item.ffrq }}</text>
									</view>
								</view>
								<view class="d-flex d-m-t-20" style="color: #5D6672;">
									<view class="d-flex-1 ">
										<text style="font-weight: bold;">发放金额</text>
										<text class="d-m-l-20">{{ item.sfgzhj }}</text>
									</view>
									<view class="" style="width: 260rpx;">
										<text style="font-weight: bold;">发放人数</text>
										<text class="d-m-l-20">{{ item.ffrs }}</text>
									</view>
								</view>
							</view>
							<view>
								<u-button
									text="查看"
									size="mini"
									shape="circle"
									:customStyle="{
										color: '#FFB61D',
										borderColor: '#FFB61D'
									}"
									@click="wagesDetail(item)"
								></u-button>
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="card d-m-t-30 d-p-30" v-for="(item, index) in list" :key="index">
						<view class="d-col-top d-font-24">
							<view class="d-flex" style="color: #5D6672;">
								<view class="d-flex-1 ">
									<text style="font-weight: bold;">姓名</text>
									<text class="d-m-l-20">{{ item.ryxm }}</text>
								</view>
								<view class="">
									<u-button
										text="查看"
										size="mini"
										shape="circle"
										:customStyle="{
											color: '#FFB61D',
											borderColor: '#FFB61D'
										}"
										@click="wagesRecord(item)"
									></u-button>
								</view>
							</view>
							<view class="d-flex d-m-t-20" style="color: #5D6672;">
								<view class="d-flex-1 ">
									<text style="font-weight: bold;">身份证</text>
									<text class="d-m-l-20">{{ item.zjhm }}</text>
								</view>
								<view>
									<text style="font-weight: bold;">实发金额</text>
									<text class="d-m-l-20">{{ item.sfje }}元</text>
								</view>
							</view>
						</view>
					</view>
				</template>
			</template>
			<template v-else>
				<view style="padding: 10vh;"><u-empty icon="/static/image/none.png" :text="show ? '暂无搜索结果' : '请输入关键词进行搜索'"></u-empty></view>
			</template>
		</view>
	</view>
</template>

<script>
import { getWagesList, getWagesPopList } from '../../../common/api.js';
export default {
	data() {
		return {
			ywbh: null,
			type: null,
			keyWord: '',
			pageNum: 1,
			pageSize: 20,
			pageLast: 1,
			list: [],
			show: false
		};
	},
	onLoad(e) {
		this.type = e.type;
		this.ywbh = e.ywbh || null;
	},
	onReachBottom() {
		if (this.pageNum < this.pageLast) {
			++this.pageNum;
			this.getList().then(e => {
				this.list = this.list.concat(e.data);
			});
		}
	},
	methods: {
		init() {
			if (!this.keyWord) {
				return uni.$u.toast('请输入关键词进行搜索');
			}
			this.pageNum = 1;
			this.show = false;
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			this.getList().then(e => {
				this.list = e.data;
				this.pageLast = Math.ceil(e.total / this.pageSize);
				this.show = true;
				uni.hideLoading();
			});
		},
		getList() {
			if (this.type == 'wages') {
				return getWagesList({
					params: {
						bzbh: this.$user.ssgcxx[this.$appIndex].bzid, // 班组id
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						deptId: this.$user.ssgcxx[this.$appIndex].deptId,
						keyWord: this.keyWord
					}
				});
			} else {
				return getWagesPopList({
					params: {
						ywbh: this.ywbh,
						keyWord: this.keyWord,
						pageNum: this.pageNum,
						pageSize: this.pageSize
					}
				});
			}
		},
		wagesDetail(item) {
			uni.$u.route({
				url: '/pages/index/wages/wagesDetail',
				params: {
					id: item.id
				}
			});
		},
		wagesRecord(item) {
			uni.$u.route({
				url: '/pages/index/wages/wagesRecord',
				params: {
					ywbh: this.ywbh,
					rybh: item.rybh
				}
			});
		}
	}
};
</script>

<style lang="scss">
.search {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 999;
	background-color: #ffffff;
	.input {
		height: 75rpx;
		background: #f6f7f8;
		border-radius: 10rpx;
		padding: 0 20rpx;
	}
}
</style>
